<!-- 饼图 -->
<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '250px'
    },
    label: {
        type: Object,
        default() {
            return {
                show: false,
                length: 0,
                length2: 0,
                fontSize: 12,
                backgroundColor: '#1890ff',
                color: '#fff',
                formatter: '{c|{d}%}',
            }
        }
    },
    full: {
        type: Object,
        default() {
            return {
                color: ['rgba(255,255,255,0.15)'],
                radius: ['51%', '70%'],
            }
        }
    },
    data: {
      type: Object,
      default() {
		return {
            name: '任务统计',
            color: ['#68abff', '#a490ff', '#fe5858', '#ffae00', '#2ed0d2'],
            showLabel: false,
            series: [
            { value: 320, name: '未进行' },
            { value: 240, name: '执行中' },
            { value: 149, name: '已完成' },
            { value: 100, name: '暂停' },
            { value: 220, name: '重启' },
            ],
        };
	  },
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    setTimeout(() => {
        this.initChart()
    }, 20)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
  },
  watch: {
    data(newData, oldData) {
      this.initChart();
    },
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el)

      let legendArray =[]
      for(let x in this.data.series){
          legendArray.push(this.data.series[x].name)
      }

      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          textStyle: {
              color: '#222',
          },
          backgroundColor: 'rgba(255,255,255,0.9)',
          borderColor: '#e2e7ec',
          borderWidth: 1,
          formatter: function(param) {
            return param.seriesName + '<br>' + param.marker + param.name + '：' + param.value + '(' + param.percent.toFixed(2) + '%)'
            // '{a} <br/>{b} : {c} (%)'
          }
        },
        legend: {
          icon: 'rect',
          itemGap: 13,
          data: legendArray,
          left: 'center',
          bottom: '0',
          itemWidth: 6,
          itemHeight: 20,
        },
        series: [
          {
            name: this.data.name,
            type: 'pie',
            color: this.data.color,
            center: ['50%', '45%'],
            radius: this.full.radius,
            avoidLabelOverlap: false,
            startAngle: 90,
            label: {
              normal: {
                show: true,
                formatter: this.label.formatter,
                rich: {
                  c: {
                    fontSize: this.label.fontSize,
                    borderRadius: 100,
                    lineHeight: 20,
                    padding: [10, 3],
                    backgroundColor: this.label.backgroundColor,
                    color: this.label.color
                  }
                }
              }
            },
            labelLine: {
              normal: {
                show: this.label.show,
                length: this.label.length,
                length2: this.label.length2
              }
            },
            itemStyle: {
              shadowBlur: '8',
              shadowColor: 'rgba(0,0,0,0.2)'
            },
            data: this.data.series,
            animationEasing: 'cubicInOut',
            animationDuration: 2600
          }, {
            color: this.full.color,
            type: 'pie',
            center: ['50%', '45%'],
            radius: ['51%', '60%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(255, 255, 255, 1)',
            },
            tooltip: {
              show: false
            },
            hoverAnimation: false,
            legendHoverLink: false,
            data: [{
              value: 1,
              name: ''
            }]
          }
        ]
      })
      var index = 0 // 播放所在下标
      setInterval(() => {
        this.chart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0, // 第几条series
          dataIndex: index // 第几个tooltip
        })
        index++
        if (index > 3) {
          index = 0
        }
      }, 2000)
      window.addEventListener('resize', () => {
        this.chart.resize();
      });
    }
    
  }
}
</script>
